<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> 
<!-- 引入element样式 -->
<link rel="stylesheet"
	href="../public/plugins/element-ui/lib/theme-chalk/index.css">
<script src="../public/libs/vue.js"></script>
<!--引入element组件库-->
<script src="../public/plugins/element-ui/lib/index.js"></script>
<script src="../public/plugins/axios/dist/axios.js"></script> 
</head>
<body>
	<div id="headVue"  >
		<div style="overflow: auto; width: 100%;">
			<el-row> 
				<el-col :span=3 align="right"> <span>产品名称：</span> </el-col> 
				<el-col :span=4> 
					<el-input type="input" size="mini" v-model="specification"></el-input> 
				</el-col> 
				<el-col :span=3	align="right"> 
					<span>船东名称：</span> </el-col> 
					<el-col :span=4> <el-input type="input"
				size="mini" v-model="vesselOwner"></el-input> </el-col> 
				<el-col :span=10> 
					<el-button size="mini" type="primary" @click="queryList">查询</el-button> 
					
				</el-col> 
			</el-row>
		</div>
		<div>
		<el-table :data="itemChainLines"	size="mini"  :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
			ref="prodLines"  border style="background-color: bisque;">              
			<el-table-column label="ID" prop="id" width=60>
				</el-table-column>
			<el-table-column prop="itemCode" label="产品编码" width=100 >		
				
			</el-table-column>
			<el-table-column prop="itemName" label="产品名称" width=200>
				</el-table-column>
			<el-table-column prop="figureNo" label="图号" width=100 >
				</el-table-column>
			<el-table-column prop="vesselType" label="船型" width=100>
				</el-table-column>
			<el-table-column prop="vesselName" label="船名号" width=100>
				</el-table-column>
				<el-table-column prop="vesselOwner" label="船东" width=100>
				</el-table-column>
			<el-table-column prop="delivery" label="发货日期" width=100>
				</el-table-column>
			<el-table-column prop="numAtCard" label="合同号" width=100>
				</el-table-column>
				<el-table-column prop="itemDesigner" label="设计人" width=100>
				</el-table-column>
			<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="primary" @click="navigate">查看详情</el-button> 
					</template> 
				</el-table-columm>
		</el-table> 

		</div>
		<div>
		<el-table :data="followingLines"	size="mini"  :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
			ref="prodLines"  border style="background-color: bisque;" > 
			<el-table-column type="expand" width=50>
				<template slot-scope="props">
					<el-table class="table-in-table" :data="props.row.records"
						style="width: 100%;"	row-key="id" border :row-class-name="tableRowClassName"
					>
						<el-table-column prop="id" label="id" width="60"></el-table-column>
						<el-table-column prop="followDate" label="跟踪日期" ></el-table-column>
						<el-table-column prop="followMan" label="跟踪人" ></el-table-column>
						<el-table-column prop="feedbackMan" label="反馈人" ></el-table-column>
						<el-table-column prop="feedbackInfo" label="答复内容" width=200></el-table-column>
						<el-table-column prop="feedbackDate" label="答复日期"></el-table-column>
						<el-table-column prop="result" label="结果"></el-table-column>
						<el-table-column label="操作" width="120">
						<template slot-scope="props">
							<el-button type="text" size="small">修改</el-button>
						</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>                 
			<el-table-column label="销售单号" prop="docEntry" width=80>
				</el-table-column>

			<el-table-column prop="itemName" label="产品名称" width=160>
				</el-table-column>
			<el-table-column prop="cardName" label="客户名称" width=100>
				</el-table-column>
			<el-table-column prop="docDate" label="录入日期" width=100>
				</el-table-column>
			<el-table-column prop="dueDate" label="要求交期" width=100>
				</el-table-column>
			<el-table-column prop="numAtCard" label="合同号" width=100>
				</el-table-column>
			<el-table-column prop="slpName" label="业务员" width=100>
				</el-table-column>
			<el-table-column prop="reason" label="跟踪原因" width=100>
				</el-table-column>
			<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="primary" @click="navigate">添加跟踪记录</el-button> 
					</template> 
				</el-table-columm>
		</el-table> 
		
		</div>
	</div>
	
	
<script>
var head = new Vue({ 
	el: "#headVue",
	data:{
		    itemChainLines: [{id:1001,itemCode:"MJ0034",itemName:"DD-31液压机",figureNo:"M3001",
				vesselType:"大型拖网",vesselName:"DT002",delivery:"2025-02-30",numAtCard:"33-F4TT",itemDesigner:'张三',
				parts:[{partCode:"FM001",partName:"阀门",specification:"0X0-33",supplier:"基设长宁"},
				{partCode:"DP015",partName:"垫片",specification:"SMS592L",supplier:"南海照星"}]},
				{id:2001,itemCode:"JK7501",itemName:"150KT液压车",figureNo:"M5042",
				vesselType:"金枪鱼钓",vesselName:"JQ43-9",delivery:"3046-02-30",numAtCard:"ASD33312",itemDesigner:'赵四'},],
			followingLines: [{docEntry:1001,itemCode:"MJ0034",itemName:"DD-31液压机",
				cardName:"盛世科技",docDate:'2020-12-20',dueDate:'2021-02-25',numAtCard:"JH2025098",slpName:'刘大',reason:'交期紧急',
				records:[{id:1,followDate:"2021-01-12",followMan:"李四",feedbackMan:"王五",
							feedbackInfo:"关键零件后天来",feedbackDate:"2021-01-14",result:'按时完成'},
				{id:2,followDate:"2021-01-27",followMan:"李四",feedbackMan:"曹七",feedbackInfo:"部件明天交",feedbackDate:"2021-01-28",result:'未完成'}],}],
			tableHead:{},
			specification:"",
			vesselOwner:""
			
		},
	methods: 
	{ 
		queryList:function(val){
			var that=this;
			this.itemChainLines=[]; 
			dataLoading=true;
			axios({
                method:'post',
                url:'../dataCenter/itemChain/list',
                data:{specification:this.specification,vesselOwner:this.vesselOwner},
                //headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{               
                var resp=rsp.data;                 
                that.itemChainLines=resp.itemChainLines; 
                if(resp.code==200){}else{}
            }).catch(error=> {
                that.$message({
                    type:'error',
                    duration:60000,
                    message:'请求失败! error:'+error
                });
            })

		},
		navigate:function(){
			window.location.href="/dataCenter/itemChain.html";
		},
		tableRowClassName:function({row,rowIndex}){		
			
			if (row.result=="未完成") {
		          return 'warning-row';
		        }
		        return '';
		}
		
	}
});


</script>

<style scoped>
	
	.el-table{
       width:99.9%!important;
	}
	.el-row {
    margin-bottom: 20px;
    
  }
  el-row:last-child {
      margin-bottom: 0;
    }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
  .myMargin{
  	margin-left:2%;
  }  
  
 .el-table .warning-row {
    background-color: yellow;
    color:red;
 
  }
  
</style> 
</body>

</html>
